<template>
  <div class="ly-main">
    <sec-form
      :searchBox="{ span: 6 }"
      :span="6"
      :ruleForm="ruleForm"
      :formData="formData"
      :optionData="optionData"
      @search="searchHandle"
      @reset="searchHandle"
    >
    </sec-form>
    <div class="user-info-con">
      <el-tabs v-model="ruleForm.status" @tab-click="tabClick">
        <el-tab-pane
          v-for="item in $store.state.dict.status"
          :key="item.value"
          :label="item.label"
          :name="item.value"
        ></el-tab-pane>
      </el-tabs>
      <sec-table :loading="loading" :tableData="tableData" :tableCol="tableCol"></sec-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>

    <el-drawer :title="title" :visible.sync="drawer" size="600px" append-to-body>
      <div class="ly-title">账号信息</div>
      <sec-desc
        :data="selRow"
        :border="false"
        :labelStyle="config.labelStyle"
        :contentStyle="config.contentStyle"
        :column="2"
        :titleData="baseInfoCol"
      ></sec-desc>
      <div class="ly-title">审批结果</div>
      <div v-if="drawer">
        <idApprove v-if="title === '审核'" @confirm="appreveConfirm" :data="selRow"></idApprove>
        <approveDetail :data="selRow" v-else></approveDetail>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { paginationMixin } from "@/mixins/pagination";
import idApprove from "./components/idApprove.vue";
import approveDetail from "./detail.vue";
import { approvalUsersApi } from "@/api/app/userApi";

export default {
  name: "",
  mixins: [paginationMixin],
  props: {},
  components: {
    idApprove,
    approveDetail,
  },
  computed: {},
  data() {
    return {
      loading: false,
      selRow: {},
      drawer: false,
      title: "",
      optionData: {
        status: this.$store.state.dict["status"],
      },
      ruleForm: { name: "", company: "", phone: "", email: "", status: "wait", date: [] },
      tableData: [],
      data: {},
    };
  },
  created() {
    this.formData = [
      { type: "text", label: "姓名", prop: "name" },
      { type: "text", label: "公司名称", prop: "company" },
      { type: "text", label: "手机号", prop: "phone" },
      { type: "text", label: "邮箱", prop: "email" },
      // { type: "select", label: "审核状态", prop: "status" },
      { type: "datetimerange", label: "申请日期", prop: "date", span: 8 },
    ];
    this.tableCol = [
      { label: "姓名", prop: "name" },
      { label: "公司名称", prop: "company" },
      { label: "手机号", prop: "phone" },
      { label: "邮箱", prop: "email" },
      {
        type: "status",
        label: "状态",
        prop: "status",
        statusClass: ({ row }) => {
          let status = {
            fail: "error",
            // 已终止: "warning",
            wait: "pending-ani",
            pass: "success",
          };
          return status[row.status];
        },
        formatter: ({ $index, column, row }) => {
          return this.utils.getDictLabel("status", row.status);
        },
      },
      { label: "申请时间", prop: "submittedAt", width: 160 },
      { label: "审批完成时间", prop: "updatedAt", width: 160 },
      {
        type: "operation",
        label: "操作",
        children: [
          {
            label: "审核",
            icon: "el-icon-s-check",
            hide: ({ row }) => {
              return row.status === "wait" ? false : true;
            },
            click: ({ row }) => {
              this.title = "审核";
              this.selRow = row;
              this.drawer = true;
            },
          },
          {
            label: "查看",
            icon: "el-icon-view",
            hide: ({ row }) => {
              return row.status !== "wait" ? false : true;
            },
            click: ({ row }) => {
              this.title = "查看";
              this.selRow = row;
              this.drawer = true;
            },
          },
        ],
      },
    ];
    this.baseInfoCol = [
      { label: "姓名", prop: "name" },
      { label: "公司", prop: "company" },
      { label: "手机号", prop: "phone" },
      { label: "邮箱", prop: "email" },
    ];
  },
  mounted() {
    this.initPage();
  },
  methods: {
    tabClick() {
      this.initPage();
    },
    appreveConfirm() {
      this.drawer = false;
      this.initPage();
    },
    searchHandle() {
      this.page = 1;
      this.initPage();
    },
    initPage() {
      this.loading = true;
      let { date } = this.ruleForm;
      let submittedAtStart = date?.[0] || "";
      let submittedAtEnd = date?.[1] || "";
      approvalUsersApi({
        ...this.ruleForm,
        submittedAtStart,
        submittedAtEnd,
        pageNum: this.page,
        pageSize: this.pageSize,
        // status: "wait", //审核中
      }).then((res) => {
        this.loading = false;
        this.tableData = [];
        let { data, total } = res.data;
        data.forEach((item) => {
          this.tableData.push({ ...item.approvalRequest, ...item.approvalResponse });
        });
        this.totalSize = total;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initPage();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initPage();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.user-info-con {
  margin: 0 20px;
}
</style>
